<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../JavaScript/vue.js"></script>
<script>
  /*
      * `Vue.extend( options )`
    - **参数**：
      - `{Object} options`
    - **用法**：
      使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
      `data` 选项是特例，需要注意 - 在 `Vue.extend()` 中它必须是函数
  * */

  // 第一步创建组件
  // const School={} Vue.extend简写
  const School = Vue.extend({
    template:`
        <div class="schoolBox">
            <h1>学校名字：{{schoolName}}</h1>
            <h1>学校地址：{{schoolAddress}}</h1>
        </div>
        `,
    data(){
      return{schoolName:"尚硅谷", schoolAddress:"北京",}
    }
  })

  // 第一步创建组件
  const Student = Vue.extend({
    template:`
          <div class="studentBox">
              <h1>学生名字：{{studentName}}</h1>
              <h1>学生年龄：{{studentage}}</h1>
<!--              在Student组件里嵌套School组件-->
              <School></School>
          </div>
        `,
    components:{
      School
    },
    data(){
      return{studentName:"陶品奇", studentage:22,}

    }
  })

  const vm=new Vue({
    el:"#app",
    template:`
          <div class="app">
          <!--第三步使用组件-->
              <Student></Student>
          </div>`
    ,
    // 第二步注册组件
    components:{Student}
  })
</script>
</body>
</html>
